<template>
	<div class="buycar">
		<router-link to="/mobile/Myorders">返回</router-link>
		<el-collapse>
			<el-collapse-item title="用户信息" name="1">
				<div class="Myinfo">
					<div class="info">
						<el-descriptions :column="2">
							<el-descriptions-item label="订单号 ">{{orderlist.ordid}}</el-descriptions-item>
							<el-descriptions-item label="订单总额 ">{{orderlist.amount}}</el-descriptions-item>
							<el-descriptions-item label="用户名">{{orderlist.ship2name}}</el-descriptions-item>
							<el-descriptions-item label="手机号">{{orderlist.ship2phone}}</el-descriptions-item>
							<el-descriptions-item label="联系地址">{{orderlist.ship2addr}}</el-descriptions-item>
							<el-descriptions-item label="支付">
								{{orderlist.payStatus==0? '未支付':'已支付'}}
							</el-descriptions-item>
						</el-descriptions>
					</div>

				</div>
			</el-collapse-item>
		</el-collapse>

		<button v-if="orderlist.payStatus==0" @click="gopay()">去支付</button>

		<div class="Cart">
			<table border="1" cellspacing="0" cellpadding="0">
				<tr>
					<td>商品图片</td>
					<td>商品名称</td>
					<td>商品价格</td>
					<td>数量</td>
				</tr>
				<tr v-for="(item,i) in orderlist.items">
					<td><img :src="`api/public/showimg/${item.book.pic}`" /></td>
					<td>{{item.book.name}}</td>
					<td>￥{{item.price}}</td>
					<td>{{item.num}}</td>
				</tr>
			</table>
		</div>
	</div>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
				ordid: '',
				orderlist: [],
				txt: '未付款',
				ispay: true,
			}
		},
		created() {
			this.ordid = this.$route.params.ordid
			this.$axios.get("/api/fore/ord/findByOrdid/" + this.ordid).then((res) => {
				if (res.status == 200) {
					this.orderlist = res.data.data
					console.log(this.orderlist);
				}
			}).catch((error) => {
				console.log(error);
			})
		},
		methods: {
			gopay() {
				console.log(1);
				this.$confirm('是否支付成功？', '确认信息', {
						distinguishCancelAndClose: true,
						confirmButtonText: '成功',
						cancelButtonText: '失败'
					})
					.then(() => {

						this.$axios.post("/api/fore/ord/addPay/" + this.ordid).then((res) => {
							if (res.status == 200) {
								this.$message({
									type: 'info',
									message: '确定付款'
								});
							}
						})
						this.ispay = false;
					})
					.catch(action => {
						this.$message({
							type: 'info',
							message: '取消付款'
						})
					});
			}


		}

	}
</script>

<style scoped>
	.buycar .Cart {
		position: relative;
		width: 100%;
	}

	.buycar .Cart table {
		width: 100%;
	}


	.buycar .Cart tr {
		background-color: #f0d4a0;
		width: 100%;
		height: 4rem;
		text-align: center;
	}


	.buycar .Cart img {
		width: 50px;
	}

	.buycar {
		position: relative;
	}

	.buycar button {
		height: 2.5rem;
		line-height: 2.5rem;
		width: 200px;
		background-color: #f36b6b;
		border: none;
		float: right;
		position: relative;
		z-index: 9;
	}
</style>